<template>
	<view class="OrderDetailsBox">
		<cu-custom :isBack="true" fhColor="#000" textColor="#000">
			<block slot="content">确认订单</block>
		</cu-custom>
		<view class="bg"></view>
		<view class="OrderDetails">
			<view class="AddressArea">
				<view class="AppendAddress" v-if="AddressList.length == 0" @click="toAddress">去添加收货地址</view>
				<view class="chooseAddress" v-else>
					<img :src="imgUrl + gameDetailsData.Order.Address" alt="" class="addresssIcon"
						v-if="AddressList.length !== 0" />
					<view class="Address">
						<view class="AddressLeft">
							<view class="AddressTop">
								<view class="Name">{{
                  DefaultAddressList[0].receiverName
                }}</view>
								<view class="Phone">{{
                  DefaultAddressList[0].receiverTel
                }}</view>
							</view>
							<view class="AddressBottom">{{
                DefaultAddressList[0].receiverDetail
              }}</view>
						</view>

						<view class="Edit" v-if="AddressList.length !== 0">
							<img :src="imgUrl + gameDetailsData.Order.SelectAddress" class="EditIcon"
								@click="ToSelectAddress" />
						</view>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 1090rpx;padding-bottom: 20rpx;margin-top: 20rpx;">
				<view class="CommodityInformation">
					<view class="CommodityList" v-for="(item, index) in cartList" :key="index">
						<view class="pic">
							<img :src="item.goodsMainImage" alt="" class="Image" />
						</view>
						<view class="NameAndSpecificationAndPrice">
							<view class="Name">{{ item.goodsName }}</view>
							<view class="SpecificationAndCount">
								<view class="Specification">{{ item.goodsSpecification }}</view>
								<view class="Count">x{{ item.goodsNum }}</view>
							</view>
							<view class="Price">
								<view class="RMB">￥</view>
								<view class="priceNum">{{ item.goodsPrice }}</view>
							</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
		<view class="ConfimArea">
			<view class="ConfimPrice">
				<view class="TotalCount">共{{ getTotalCount }}件</view>
				<view class="text">合计:</view>
				<view class="price">
					<view class="RMB">￥</view>{{ getTotalPrice }}
				</view>
			</view>
			<view class="btn" @click="ConfimOrder"> 提交订单 </view>
		</view>
	</view>
</template>

<script>
	import gameDetails from "../../static/lib/public";
	export default {
		data() {
			return {
				DefaultAddressList: {},
				cartList: [],
				AddressList: [],

				imgUrl: this.$http.imgUrl,

				gameDetailsData: gameDetails,
			};
		},
		onLoad(optipns) {
			this.cartList = JSON.parse(optipns.cartList);
			console.log(this.cartList);
		},
		methods: {
			async ConfimOrder() {
				const url = this.api.shopCart.CreateOrder;
				const orderPrice = this.cartList.reduce((res, item) => {
					return (res += item.goodsPrice * item.goodsNum);
				}, 0);
				const res = await this.$http.post(url, {
					goodsCart: this.cartList,
					orderPrice,
					addressId: this.DefaultAddressList[0].id,
				});
				if (res.data.code === 200) {
					const urla = this.api.order.pay;
					let details = await this.$http.post(urla, {
						orderCode: res.data.message,
						payMode: 1
					})
					let arr = details.data.data
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: arr.timeStamp,
						nonceStr: arr.nonceStr,
						package: arr.package,
						signType: arr.signType,
						paySign: arr.paySign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							uni.navigateBack({})
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							uni.showToast({
								title: '取消支付',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({})
							}, 300)
						}
					});
					// uni.navigateBack({});
				} else if (res.data.code === 500) {
					uni.showToast({
						title: "库存不足",
						icon: "error",
					});
				}
				console.log(res.data, "生成订单");
			},
			ToSelectAddress() {
				console.log(11111);
				uni.navigateTo({
					url: "/pagesA/Order/SelectAddress",
				});
			},
			toAddress() {
				uni.navigateTo({
					url: "/pagesA/Order/SelectAddress",
				});
			},
			async getAddressList() {
				const url = this.api.my.AddressList;
				const res = await this.$http.get(url, {});
				console.log(res, "地址列表");
				this.AddressList = res.data.data;
				this.DefaultAddressList = this.AddressList.filter(
					(item) => item.defaultStatus
				);
				if (this.DefaultAddressList.length == 0) {
					this.DefaultAddressList[0] = this.AddressList[0];
				}
			},
		},
		created() {
			this.getAddressList();
		},
		computed: {
			getTotalPrice() {
				return this.cartList.reduce((res, item) => {
					return (res += item.goodsPrice * item.goodsNum);
				}, 0);
			},
			getTotalCount() {
				return this.cartList.reduce((res, item) => {
					return (res += item.goodsNum);
				}, 0);
			},
			getAddress() {},
		},
		onShow() {
			console.log(!uni.getStorageSync("Address"));
			if (uni.getStorageSync("Address")) {
				const Address = JSON.parse(uni.getStorageSync("Address"));
				this.AddressList.push(Address);
				this.$set(this.DefaultAddressList, 0, Address);
			} else {
				this.getAddressList();
			}
		},
	};
</script>
<style lang="scss" scoped>
	.OrderDetailsBox {
		position: relative;
		padding-bottom: 194rpx;

		.bg {
			width: 100%;
			height: 348rpx;
			background-image: url("https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/bg.png");
			background-size: 100% 100%;
			position: absolute;
			top: 0%;
			z-index: -1;
		}

		.OrderDetails {
			.AddressArea {
				width: 702rpx;
				height: 138rpx;
				background: #ffffff;
				box-shadow: 0rpx 10rpx 20rpx 2rpx rgba(253, 170, 100, 0.05);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				margin-left: 30rpx;
				padding: 28rpx 24rpx 33rpx 40rpx;

				.AppendAddress {
					width: 252rpx;
					height: 60rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					opacity: 1;
					line-height: 60rpx;
					text-align: center;
					border: 2rpx solid rgba(0, 12, 39, 0.05);
					margin-left: 200rpx;
					margin-top: 10rpx;
				}

				.chooseAddress {
					display: flex;
					align-items: center;

					.addresssIcon {
						width: 70rpx;
						height: 70rpx;
						margin-right: 20rpx;
					}

					.Address {
						flex: 1;
						display: flex;
						align-items: center;

						.AddressLeft {
							flex: 1;

							.AddressTop {
								display: flex;
								align-items: center;
								margin-bottom: 20rpx;

								.Name {
									margin-right: 20rpx;
									color: #1b1b2a;
									font-size: 28rpx;
								}

								.Phone {
									color: #616162;
									font-size: 24rpx;
								}
							}
						}

						.Edit {
							width: 30rpx;
							height: 30rpx;

							.EditIcon {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

			.CommodityInformation {
				width: 702rpx;
				margin-left: 25rpx;
				background-color: #FFFFFF;
				border-radius: 30rpx;
				margin-top: 16rpx;
				padding: 48rpx 32rpx 54rpx 32rpx;
				margin-bottom: 100rpx;
				margin-top: 50rpx;

				.CommodityList {
					display: flex;
					margin-bottom: 20rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.pic {
						width: 180rpx;
						height: 180rpx;
						background: #ffffff;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;

						.Image {
							width: 100%;
							height: 100%;
						}
					}

					.NameAndSpecificationAndPrice {
						width: 200rpx;
						margin-left: 20rpx;
						flex: 1;

						.Name {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
							color: #000;
						}

						.SpecificationAndCount {
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 100%;

							.Specification {
								height: 56rpx;
								text-align: center;
								line-height: 56rpx;
								margin-top: 20rpx;
								border-radius: 16rpx;
								text-overflow: ellipsis;
								white-space: nowrap;
								padding: 0rpx 20rpx;
								font-size: 28rpx;
								background-color: #f3f3f4;
							}
						}

						.Price {
							color: #e34949;
							margin-top: 20rpx;
							display: flex;
							align-items: center;

							.RMB {
								font-size: 22rpx;
							}

							.priceNum {
								font-size: 32rpx;
							}
						}
					}
				}
			}
		}

		.ConfimArea {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
			height: 194rpx;
			opacity: 1;
			display: flex;
			padding: 20rpx 24rpx 90rpx 24rpx;
			align-items: center;

			.ConfimPrice {
				display: flex;
				align-items: center;

				.TotalCount {
					color: #666;
					font-size: 24rpx;
					margin-right: 12rpx;
				}

				.text {
					color: #1b1b2a;
					font-size: 24rpx;
				}

				.price {
					color: #e34949;
					font-size: 36rpx;
					display: flex;
					align-items: center;

					.RMB {
						font-size: 22rpx;
					}
				}
			}

			.btn {
				width: 304rpx;
				height: 84rpx;
				background: #386af6;
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				opacity: 1;
				text-align: center;
				line-height: 84rpx;
				color: #FFFFFF;
				margin-left: 124rpx;
			}
		}
	}
</style>